<template>
<div>
     <div class="sarch">
         <div class="learning">
              <Input v-model.trim="value14" placeholder="学习站" clearable @keyup.enter.native="searchname" style="width: 200px" />
         <Button type="primary"  @click="searchname">搜索</Button>
         </div>
         <div class="arew">
            <span>地区：</span>
        <Select v-model="model2" style="width:200px" >
            <Option   v-for="item in city" :value="item.name" :key="item.id"
            @click.native="optionselet(item.id)"
            >{{ item.name }}</Option>
        </Select>
         </div>
      <div class="downs">
          <Button type="success" @click=" newadd">新增学习站</Button>
         <Button type="info" @click="downs">下载学员信息</Button>
        </div>
         
         <!-- 弹出层 添加学习站-->
        <Modal
        v-model="modal1"
        title="添加学习站">
        <!-- 下拉框 -->
    <div class="content">
      <div class="Selectd">
      <span>区域：</span>
    <Select v-model="model1" style="width:200px" class="learn-selet"  >
        <Option v-for="(item,index) in cityList"  @click.native="option(item.id)"
        :value="item.name" :key="item.id">{{ item.name }}</Option>
    </Select>
      </div>
      <div class="learn-state">
      <span>站点：</span>
          <Input class="learn-input" v-model.trim="datalist.groupName" placeholder="学习站" clearable style="width: 200px" />
      </div>
        <div class="QR">
               <h3 class="codes"><span>添加群二维码</span>
               <span style="font-weight: normal">上传进度：<span style="color:green">{{rate}}%</span></span>
               </h3>
                 <label class="updata"><span></span><input type="file" name="" value="" style="display:none" @change="updata"></label>
                 <div class="qr-img" v-if="this.datalist.shareImage">
                     <img :src="this.datalist.shareImage" alt="">
                 </div>
        </div>
     </div>
     <div slot="footer">
               <!-- <span @click.prevent="oksure">111111111</span> -->
        <Button type="primary" size="large"  @click.prevent="oksure">确定</Button>
        </div>
         <!-- 下拉框 -->
    </Modal>
     </div>
     <!-- 表格 -->
    <Table border :columns="columns1" :loading="loading"  :data="data1"></Table>
         <!-- 表格 -->
    <!-- 删除弹出层 -->
    <Modal v-model="modal2" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>{{ dele. del1}}</span>
        </p>
        <div style="text-align:center">
            <p>{{ dele.del2}}</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">{{ dele.del3}}</Button>
        </div>
    </Modal>
    <!-- 删除弹出层 -->
    <!-- 更新二维码 -->
    <Modal
        v-model="modal6"
        title="更新二维码">
           <div class="QR">
    <div class="learn-state  learn-center">
      <span>站点：</span>
          <Input class="learn-input" v-model.trim="datalist.groupName" placeholder="学习站" clearable style="width: 200px" />
      </div>
                 <label class="updata"><span></span><input type="file" name="" value="" style="display:none" @change="updata"></label>
            <div class="qr-img" v-if="this.datalist.shareImage">
                <img :src="this.datalist.shareImage" alt="">
            </div>
        </div>
        <div slot="footer">
            <Button type="success" size="large"  :loading="modal_loading" @click="update">确定</Button>
        </div>
    </Modal>
    <!-- 更新二维码 -->
    <!-- 图片点击放大 -->
    <Modal v-model="modal9" width="360">
        <p slot="header" style="color:#f60;text-align:center">
        </p>
        <div style="text-align:center" class="big-img">
           <img :src="bigimage" alt="">
        </div>
        <div slot="footer">
          
        </div>
    </Modal>
    <!-- 图片点击放大 -->
     <div class="pages">
            <Page :total="pageTotal" :current="pageNum" :page-size="pageSize" show-elevator show-total 
placement="top" @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
        </div>
</div>
    
</template>
<script>
    export default {
        data () {
            return {
              city: [

                ],
            pageTotal: 0,
             pageNum: 1,
             pageSize: 10,
                rate:0,
                modal9:false,
                bigimage:'',
                model2: '全部',
               Token:'',
               isDisable: false,
               name:'',
                 loading: true,
                datalist:{
                    regionId:'',
                    groupName:'',
                    shareImage:'',
                },
                cityList: [
                ],
                dele:{
                    del1:"删除确认",
                    del2:"是否继续删除？",
                    del3:"删除"
                },
                model1: '',
                value14: '',
                areaid:'',
                // value1:'',
                modal1: false,
                modal2: false,
                modal6:false,
                 modal_loading: false,
                 removeindex:'',
                 removeid:'',
                 updateindex:'',
                 dataDel:[],
                columns1: [
                    {
                        title: '序号',
                        key: 'number',
                        align: 'center'
                    },
                    {
                        title: '区域',
                        key: 'Area',
                        align: 'center'
                    },
                    {
                        title: '站名',
                        key: 'Name',
                        align: 'center'
                    },
                    {
                        title: '二维码',
                        key: 'qr_code',
                        align: 'center',
                         render: (h, params) => {
                            // console.log(params)
                            // console.log(params.row.qr_code)
                            if (params.row.qr_code==null) 
                                {
                                     return false                                    
                                }
                            return h('a', [
                                h('img', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    attrs:{
                                        src: params.row.qr_code
                                    },
                                    style: {
                                        marginRight: '5px',
                                        height:'80px',
                                        width:'80px'
                                    },
                                    on: {
                                        click: () => {
                                            // this.show(params.index)
                                            // console.log(params.index);
                                            // console.log(this.dataDel[params.index].qr_code);
                                            this.bigimage=this.dataDel[params.index].qr_code;
                                            this.modal9=true;

                                        }
                                    }
                                }, params.row.qr_code)
                            ]);
                        }
                    },
                    {
                        title: '有效时间7天',
                        key: 'update_time',
                        align: 'center',
                         render: (h, params) => {
                            // console.log(params.row.update_time)
                            if (params.row.update_time==null) 
                                {
                                    return false
                                }
                                
                                // console.log( typeof  this.Util.day(this.Util.timeStamp()-params.row.update_time).slice(0,1))
                                var number= Number(  this.Util.day(this.Util.timeStamp()-params.row.update_time).slice(0,1))
                                // console.log(number)
                                var color="";
                                if (number>5) 
                                    {
                                       var colors="red"  
                                    }else{
                                        var colors="#515a6e"   
                                    }
                                    
                            return h('div', [
                                  h('span', {
                                    props: {
                                         type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color:colors
                                    },
                                    on: {
                                        click: () => {
                                           
                                        }
                                    }
                                }, this.Util.day(this.Util.timeStamp()-params.row.update_time))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'operation',
                        align: 'center',
                            render: (h, params) => {
                                var buttname="";
                                var updata="";
                                var states="";
                                // console.log(params.index)
                                if (this.dataDel[params.index].status==1) 
                                    {
                                        var buttname="删除";
                                          var updata="更新数据";
                                          var states="primary";
                                       
                                    }else{
                                        var buttname="取消删除"
                                          // var updata="已下架";
                                          // var states="error";
                                          var updata="更新数据";
                                          var states="primary";
                                    }        
                            return h('div', [
                                  h('Button', {
                                    props: {
                                         type: states,
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.replace(params.index)
                                            // console.log(this.dataDel[params.index].name)
                                            this.datalist.groupName=this.dataDel[params.index].name
                                            this.datalist.shareImage=this.dataDel[params.index].qr_code
                                        }
                                    }
                                }, updata),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.modal2=true;
                                            this.remove(params.index)
                                        }
                                    }
                                },buttname)
                                // if (this.dataDel[params.index].status==2) 
                                //     {
                                //         return false
                                //     }
                                    
                                //     h('Button', {
                                //     props: {
                                //         type: 'error',
                                //         size: 'small'
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.modal2=true;
                                //             this.remove(params.index)
                                //         }
                                //     }
                                // },"已下架")

                            ]);
                        }
                    }
                    
                ],
                data1: [
                ]
            }
        },
        created(){
            // console.log( this.regionId)
        this.Token=sessionStorage.getItem("Token");
        if (this.Token) 
          {
            this.Token=sessionStorage.getItem("Token");
          }else{
            this.$router.push('/')
          }
          
        this.arealist();
        this.getlist();
        // console.log((this.Util.timeStamp()-1558588015)/60/60/24)
        // console.log(this.Util.day(this.Util.timeStamp()-1558620415))
        // console.log(this.Util.day(1559032946-this.Util.timeStamp()))
        // console.log((1559032946-this.Util.timeStamp())/60/60/24)
        },
        methods: {
          handlePage(value) {
      this.pageNum = value
        this.loading = true;
      this.getlist();
    },
    handlePageSize(value) {
      this.pageSize = value
   this.getlist();
    },
      optionselet(id){
            this.loading=true;
           this.areaid=id;
            this.pageNum = 1;
      this.getlist();
          },
            option(id){
                this.datalist.regionId=id;
            },
            downs(){
            window.open(this.Util.URL()+"/apiClientBackend/study-group/user-download");
            },
            // 二维码上传-------------------------
              updata(e){
              let files = e.target.files[0]; 
              // console.log(files);
              let readers = new FileReader();
              // console.log(readers);
                 readers.readAsDataURL(files);
                  readers.onload = e => {
                var imgFiled= e.target.result; 
                // console.log(imgFiled);
                this.datalist.shareImage=imgFiled;
               }
                },
                // 站名搜索--------------------------
                searchname(){
                    this.name=this.value14;
                    this.pageNum = 1;
                      this.loading=true;
                this.getlist()

                },
                // 更新二维码-----------------------------
                replace(index){
                    this.datalist.shareImage="";
                        // if (this.dataDel[index].status==2) 
                        //  {
                        //     return false
                        // }
                    this.modal6=true;
                   this.updateindex= this.dataDel[index].id;
                   // this.dataDel[this.updateindex].id
                   // console.log(this.dataDel[this.updateindex].id)
                },
                update() {

                       var that=this;
                this.modal_loading = true;
                setTimeout(() => {
                      this.modal_loading = false;
                      var that=this;
                            this.axios.post(this.Util.URL()+'/apiClientBackend/study-group/area-group?access-token='+this.Token+'&method='+'update'+'&group-id='+this.updateindex+'&group-name='+this.datalist.groupName,{
                                        "qr-code":this.datalist.shareImage
                                     }
                               )
                             .then(function (res) {
                             console.log(res.data);
                             console.log(res);
                             if (res.data.status==1) 
                                 {
                                    that.modal6 = false;
                                   
                                     that.loading=true;
                                      that.$Message.success('更新成功');
                                      // alert("更新");
                                    that.getlist();

                                 }  
                             })
                             .catch(function (err) {
                             console.log(err);
                             });   
                }, 1000);
                },
                // 删除-----------------------------------------
                remove(index){
                    this.removeid=this.dataDel[index].id;
                    this.removeindex=index;
                    console.log(this.removeindex);
                    console.log(this.dataDel[this.removeindex].status);

                    if (this.dataDel[index].status==1) 
                    {
                       this.dele.del1="删除确认"
                       this.dele.del2="是否继续删除？"
                       this.dele.del3="删除"
                    }else{
                       this.dele.del1="取消删除确认"
                       this.dele.del2="是否取消删除？"
                       this.dele.del3="取消删除"

                    }
                },
                 del () {
                    var that=this;
                this.modal_loading = true;
                var test="";
                if (this.dataDel[this.removeindex].status==1) 
                    {
                        var test='delete'
                    }else{
                        var test='un-delete';

                    }
                    
                setTimeout(() => {
                      this.modal_loading = false;
                    // this.modal2 = false;
                      var that=this;
                            this.axios.post(this.Util.URL()+'/apiClientBackend/study-group/area-group?access-token='+this.Token+'&method='+test+'&group-id='+this.removeid
                               )
                             .then(function (res) {
                             console.log(res.data);
                             console.log(res);
                             // return false;
                             if (res.data.status==1) 
                                 {
                                    that.modal2 = false;
                                      if (that.dataDel[that.removeindex].status==1) 
                                      {
                                          that.$Message.success('删除成功');
                                      }else{
                                          that.$Message.success('取消删除成功');

                                      }
                                    
                                      that.loading = true;
                                    that.getlist();
                                    // that.data1.splice(this.removeindex,1);

                                 }
                                 

                                 
                             })
                             .catch(function (err) {
                             console.log(err);
                             });   
                }, 1000);
            },

            // 获取数据列表---------------------------
                getlist(){
                  // console.log(this.pageSize);
                 var that=this;
                  var pagenum=this.pageNum-1;
                            this.axios.post(this.Util.URL()+'/apiClientBackend/study-group/area-group?access-token='+this.Token+'&method='+'get-all'+'&page='+pagenum+'&page-size='+this.pageSize+'&group-name='+this.name+'&area-id='+this.areaid
                              )
                             .then(function (res) {
                            that.dataDel=res.data.data.groups;
                             console.log(res.data);
                             console.log(res.data.data);
                             console.log(res.data.data.group_count_all);
                             that.pageTotal=res.data.data.group_count_all
                                that.data1.splice(0);
                                console.log(res.data.status);
                             if (res.data.status==1) 
                                 {
                                    // return false
                                    for (var i = 0; i < res.data.data.groups.length; i++) {
                                        that.data1.push({
                                            number:i+1+(pagenum*10),
                                            Area:res.data.data.groups[i].area_name,
                                            Name:res.data.data.groups[i].name,
                                            qr_code:res.data.data.groups[i].qr_code,
                                            update_time:res.data.data.groups[i].update_time
                                     })
                                    }
                                    
                                 }
                                 

                                 
                             })
                             .catch(function (err) {
                             console.log(err);
                             }).finally(() => this.loading = false);
                 
                },
                // 区域列表-------------------------------
              arealist(){
              var that=this;
            this.axios({
                      method: 'get',
                      url: this.Util.URL()+'/apiClientBackend/study-group/get-area?access-token='+this.Token
                    }).then(function (res) {
                         console.log(res.data)
                        if (res.data.status==1) 
                            {
                               that.cityList=res.data.data;
                                that.city=res.data.data;
                                that.city.unshift({
                                  name:"全部",
                                  id:""
                                })
                                console.log(that.city);
                            }      
                    }).catch(function (error) {
                      console.log(error)
                    })
              }, 
               
         // 创建列表---------------------------------- 
         newadd(){
            this.modal1 = true;
            this.datalist.groupName="";
            this.datalist.shareImage="";
            this.rate=0;
         },
            oksure() {
                 var that=this;
                 if (this.datalist.regionId=="") 
                     {
                       this.$Message.error('请选择区域');  
                     }
                     else if(this.datalist.groupName==""){
                           this.$Message.error('填写站名');  
                     }
                     else if(this.datalist.shareImage==""){
                        this.$Message.error('上传群二维码');  
                     }else{
                            this.axios.post(this.Util.URL()+'/apiClientBackend/study-group/area-group?access-token='+this.Token+'&method='+'create'+'&area-id='+this.datalist.regionId+'&group-name='+this.datalist.groupName,
                            {
                          "qr-code":this.datalist.shareImage
                               },{

                    onUploadProgress: (progressEvent)=> {
                        // 对原生进度事件的处理
                        console.log(progressEvent);
                       var progress =  (progressEvent.loaded/progressEvent.total)*100;
                       console.log(progress);

                       this.$nextTick(function() {
                           this.rate = Math.ceil(progress);
                       })


                    }
                }
                               )
                     .then(function (res) {
                             console.log(res);
                             if (res.data.status==1) 
                                 {
                                     that.$Message.success('成功');
                                     setTimeout(function() {
                                        that.modal1=false;
                                     }, 800);
                                     that.loading = true;
                                          that.getlist()
                                 }
                                 else if(res.data.status==3){
                                    that.$Message.error('站点已重复');
                                 }
                                 
                             })
                             .catch(function (err) {
                             console.log(err);
                             }); 
                 }
            }
        }

    }
</script>
<style scoped>
    .sarch{
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
    }
    .content .Selectd,.content .learn-state{
        width: 240px;
        margin: 10px auto;
        display: flex;justify-content:space-between;
        align-items: center;
    }
.updata span,.updatapic span{
    cursor:pointer;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #fff url("../images/upda.png")  center no-repeat;
border:1px dashed #ccc;
}
.updata span:hover,.updatapic span:hover{
  border:1px dashed #2d8cf0;  
}
.qr-img{
    display: inline-block;
    margin-left: 20px;
 width: 100px;
 height: 100px;   
}
.qr-img img{
    width: 100%;
    height: 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}
.codes{
    height: 40px;
    line-height: 40px;
}
.downs{
    width:230px;
    display: flex;
    justify-content: space-between;
}
.learn-center{
    margin: 20px auto;
}
.big-img{
  width: 219px;
  height: 316px;
      margin: 0 auto;
}
.big-img img{
  width: 100%;
  height: 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
 .pages {
      margin:16px 0;
        display: flex;
        justify-content: flex-end;
     }
   .totalls{
        margin-bottom: 20px;
     }
/*.qr-img */
</style>
